<template>
  <div class="row q-col-gutter-md justify-center">
    <div v-for="item in list"
         :key="item.name"
         class="col-auto">
      <a @click="push(item.link)">
        <div class="row q-card card-list-custom shadow-2 q-pa-sm" :style="`margin: 0 auto; max-width: ${itemMaxWidth}`">
          <div class="col-12 text-center">
            <q-icon :name="item.icon" :size="iconSize" />
          </div>
          <div class="col-12 text-h6 text-bold text-center">{{ item.name }}</div>
        </div>
      </a>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from '@vue/composition-api';
import { CardListItem } from './models';

export default defineComponent({
  name: 'CardList',
  setup() {
    return {};
  },
  props: {
    list: {
      type: (Array as unknown) as PropType<CardListItem[]>,
      required: true
    },
    itemMaxWidth: {
      type: String,
      default: '184px'
    },
    iconSize: {
      type: String,
      default: '168px'
    }
  },
  methods: {
    push(location: string): void {
      this.$router.push(location).catch(() => {
        document.location.href = location;
      });
    }
  }
});
</script>

<style scoped>
.card-list-custom {
  cursor: pointer;
  transition-duration: 0.5s;
}

.card-list-custom:hover {
  -webkit-box-shadow: #ccc 0 10px 10px;
  -moz-box-shadow: #ccc 0 10px 10px;
  box-shadow: #ccc 0 10px 10px;
}
</style>
